<template>
  <a-form-model
    class="mt-6"
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    v-bind="{
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    }"
  >
    <a-form-model-item ref="username" label="用户名" prop="username">
      <a-input v-model="ruleForm.username" />
    </a-form-model-item>

    <a-form-model-item label="密码" prop="password">
      <a-input v-model.trim="ruleForm.password" />
    </a-form-model-item>

    <a-form-model-item ref="mobile" label="手机号" prop="mobile">
      <a-input v-model="ruleForm.mobile" />
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        username: '',
        mobile: '',
        password: '',
      },
      rules: {
        username: [{ required: true, trigger: 'blur' }],
      },
    }
  },
  methods: {
    onSubmit(cb) {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          cb(this.ruleForm)
        }
      })
    },
  },
}
</script>
